<template>
	<view class="page bg-white">
		<action-bar :isBack="false" title="首页"></action-bar>
		<!-- 新增账本按钮 -->
		<view class="bottom-btn text-center animation-slide-bottom" style="animation: 1s;">
			<button @click="createNewBook" class="cu-btn round bg-red">+新账本</button>
		</view>
		
		<view class="text-center padding" v-if="book.selfList.length <= 0 && book.joinList.length <= 0">
			没有账本？，点击下方按钮创建新的账本
		</view>

		<!-- 账本显示滚动列表 -->
		<scroll-view v-else scroll-y="true">
			<view class="cu-list menu-avatar" v-if="book.selfList && book.selfList.length > 0">
				<!-- 个人账本展示 -->
				<view class="padding bg-white">
					<class class="cu-capsule">
						<view class="cu-tag bg-red radius-left-tb">我的账本</view>
						<view class="cu-tag line-red radius-right-tb">1</view>
					</class>
				</view>
				<view v-for="(item,index) in book.selfList"
					  class="cu-item padding-sm"
					  @click.stop="turn_to_content(item.id, item.budget, item.userId, false)">
					<view class="cu-avatar lg img account-image"
						  :style="'background-image: url(' + (header + images[Number(item.imageId)].path) +')'"></view>
					<view class="content">
						<view class="text-black" v-text="item.bookName"></view>
						<view class="text-gray text-sm flex" v-text="item.mark"></view>
						<view class="text-gray text-xs">最后更新时间: {{item.latest ? dateFormat(item.latest) : '-'}}</view>
					</view>
					<view class="action" @click.stop="trun_to_comment(item.id, item.belong, item.userId, false)">
						<view class="text-gray text-xs">详细&gt;</view>
					</view>
				</view>
			</view>
			
			<view class="cu-list menu-avatar" v-if="book.joinList && book.joinList.length > 0">
				<view class="padding bg-white">
					<class class="cu-capsule">
						<view class="cu-tag bg-blue radius-left-tb">我加入的</view>
						<view class="cu-tag line-blue radius-right-tb">1</view>
					</class>
				</view>
				<view v-for="(item,index) in book.joinList"
					  class="cu-item padding-sm"
					  @click.stop="turn_to_content(item.id, item.budget, item.userId, true)">
					<view class="cu-avatar lg img account-image"
						  :style="'background-image: url(' + (header + images[Number(item.imageId)].path) +')'"></view>
					<view class="content"> 
						<view class="text-black" v-text="item.bookName"></view>
						<view class="text-gray text-sm flex" v-text="item.mark"></view>
						<view class="text-gray text-xs">最后更新时间: {{item.latest ? dateFormat(item.latest) : '-'}}</view>
					</view>
					<view class="action" @click.stop="trun_to_comment(item.id, item.belong, item.userId, true)">
						<view class="text-gray text-xs">详细&gt;</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {header, images} from '../../static/account-images.js'
	import {dateFormat} from '../../common/dateUtils.js'
	import {setUserPermission} from '../../common/permission.js'
	export default {
		data() {
			return {
				header, images,
				curPage: 1,
				bookList: [],
				book: {
					selfList: [],
					joinList: []
				},
				sys: {
					m: null,
					bid: null,
				}
			}
		},
		onLoad(option) {
			uni.showLoading({title: '加载中'})
			
			this.getBookList()
			this.sys.m = option.m			// 加载模式
			this.sys.bid = option.bid		// 跳转bid
			
			// 扫描二维码加载到账本中
			if (this.sys.m && this.sys.m == 'invite') {
				// 跳转到页面
				// this.$message.info('扫码成功, 正在跳转到账本')
				// setTimeout(() => {
				// 	// turn_to_content(id, budget, uid, needCheckPermission) {
				// 	this.turn_to_content(this.sys.bid, null, this.$store.getters.id, true)
				// }, 1000)
			}
		},
		methods: {
			dateFormat,
			setUserPermission,
			/**
			 * 查询用户账单列表
			 */
			getBookList() {
				this.$request({
					url: `/account/list/${this.$store.getters.id}`
				}).then(res => {
					if (res && res.data.code === 200 && res.data.list.length > 0) {
						let list = res.data.list
						for (let item of list) {
							if (item.belong == 'JOIN') {
								this.book.joinList.push(item)
							} else {
								this.book.selfList.push(item)
							}
						}
					}
				}).catch(err => {
					
				}).finally(() => {
					uni.hideLoading()
				})
			},
			
			/**
			 * 转到详情界面
			 * 账本详情以及账本使用人员信息
			 * @param {Object} id 账本ID
			 * @param {Object} budget
			 * @param {Object} uid 账本所有人id
			 * @param {Object} needCheckPermission 是否需要检查权限
			 */
			turn_to_content(id, budget, uid, needCheckPermission) {
				this.$store.commit('setCurrentBookUserId', uid)
				if (needCheckPermission) {
					this.setUserPermission(id).then(() => {
						uni.navigateTo({url: `./content?id=${id}&budget=${budget || 0}&uid=${uid}`})
					}).catch(() => {
						this.$message.error('请求失败')
					})
				} else {
					uni.navigateTo({url: `./content?id=${id}&budget=${budget || 0}&uid=${uid}`})
				}
			},
			
			/**
			 * * 跳转到评论页面
			 * @param {Object} id 账本ID
			 * @param {Object} belong SELF|JOIN
			 * @param {Object} uid 账本所有人id
			 * @param {Object} needCheckPermission 是否需要检查权限
			 */
			trun_to_comment(id, belong, uid, needCheckPermission) {
				this.$store.commit('setCurrentBookUserId', uid)
				if (needCheckPermission) { 
					this.setUserPermission(id).then(() => {
						uni.navigateTo({url: `./comment?id=${id}&belong=${belong}`})
					}).catch(() => {
						this.$message.error('请求失败')
					})
				} else {
					uni.navigateTo({url: `./comment?id=${id}&belong=${belong}`})
				}
			},
			
			/**
			 * 创建新的账本
			 */
			createNewBook() {
				uni.navigateTo({url: 'create'})
			},
		}
	}
</script>

<style>
	
	.page {
		height: 100vh;
		width: 100vw;
	}
	
	.img {
		width: 48px;
		height: 48px;
	}
	
	.account-image {
		border-radius: 10rpx 25rpx 25rpx 10rpx;
		width: 	90rpx !important;
		height: 110rpx !important;
	}
	
	.radius-left-tb {
		border-radius: 10rpx 0 0 10rpx;
	}
	
	.radius-right-tb {
		border-radius: 0 10rpx 10rpx 0;
	}
</style>
